<template>
  <div class="chat">
    <el-row>
      <el-col :span="6">
        <div class="chat-friend">
          <div class="friend-search">
            <el-input
                v-model="friendSearch"
                size="small"
                suffix-icon="Search"/>
          </div>
          <div class="friend-list">
              <div v-for="item in friendList" class="friend-item">
                <div class="friend-item-avatar">
                  <el-avatar :src="item.avatar" :size="40"/>
                </div>
                <div class="friend-item-info">
                  <div class="friend-item-info-title">
                    <span style="float: left; display: inline-block; height: 22px; line-height: 27.5px">{{ item.name }}</span>
                    <span style="float: right; display: inline-block; height: 22px; line-height: 27.5px">{{ proxy.$moment(item.time).format("HH:mm") }}</span>
                  </div>
                  <div class="friend-item-info-message">
                    {{ item.message }}
                  </div>
                </div>
              </div>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="message">
          <div class="message-title">
            <span style="display: inline-block; float:left;">与xxx聊天中</span>
            <span style="display: inline-block; float: right;">...</span>
          </div>
          <div class="message-content">
            <div class="message-content-item">
              <span class="message-content-send-avatar">
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="40"/>
              </span>
              <span class="message-content-send-msg">你好，我又见事情想，我又见事说一下你好，我又见事情想发顺</span>
            </div>
            <div class="message-content-item">

              <span class="message-content-recv-avatar">
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="40"/>
              </span>

              <span class="message-content-recv-msg">
                <span class="message-content-recv-msg-title">小强1</span>
                <span class="message-content-recv-msg-content">你好，我又见事情想，我又见事说一下你好，我又</span>
              </span>

            </div>
          </div>
          <div class="message-write">
            <div class="message-write-title">
              <span class="message-write-title-func">
                <el-icon :size="20"><FolderRemove /></el-icon>
              </span>
              <span class="message-write-title-func">
                <el-icon :size="20"><VideoCamera /></el-icon>
              </span>
              <span class="message-write-title-func">
                <el-icon :size="20"><ChatDotRound /></el-icon>
              </span>
            </div>
            <div class="message-write-send">
              <textarea></textarea>
            </div>
            <div class="message-write-btn">
              <span style="margin-right: 20px">
                <el-button color="#E9E9E9" size="small">发送</el-button>
              </span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import {getCurrentInstance, onMounted, ref, watch} from "vue";
import {Message} from "@/domain/Message";
// 全局对昂
const {proxy} = getCurrentInstance()

const friendSearch: string = ref('')
const friendList: Array = ref<Array<Message>>([])
const sendMsg: string = ref('')

onMounted(() => {
  const message1: Message = {
    id: "1",
    avatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
    name: "小强1",
    message: "测试的",
    time: new Date()
  }
  friendList.value.push(message1)
  friendList.value.push(message1)
  friendList.value.push(message1)
  friendList.value.push(message1)
})

</script>
<style scoped lang="scss">
.chat {
  padding: 18px 0;

  .chat-friend {
    height: calc(100vh - 36px);
    padding: 0 5px;
    .friend-search {
      height: 24px;
      line-height: 24px;
    }

    .friend-item {
      height: 55px;
      line-height: 55px;
      position: relative;
      margin: 5px 0;
      box-shadow: 0px 1px 4px #969494;
      cursor: pointer;
      .friend-item-avatar {
        display: inline-block;
        height: 55px;
        padding-top: 7px;
        float: left;
      }

      .friend-item-info {
        float: left;
        width: 75%;
        height: 55px;
        display: inline-block;
        padding-left: 5px;
        .friend-item-info-title {
          font-size: 10px;
          height: 27.5px;
        }

        .friend-item-info-message {
          font-size: 10px;
          height: 27.5px;
          line-height: 27.5px;
        }
      }
    }
  }

  .message {
    padding: 0 5px;
    height: calc(100vh - 36px);
    border-left: 1px solid #f3eded;
    .message-title {
      height: 24px;
      line-height: 24px;
      position: relative;
    }
    .message-content {
      height: calc(100vh - 190px);

      .message-content-item {
        position: relative;
        display: inline-block;
        margin-bottom: 25px;
        width: 100%;

        .message-content-send-avatar {
          display: inline-block;
          //vertical-align: bottom;
          float: right;
          &::before {
            content: '';
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid #21d778;
            margin-right: 10px;
            position: absolute;
            right: 32px;
            top: 12px
          }
        }
        .message-content-send-msg {
          float: right;
          max-width: 82%;
          background-color: #21d778;
          border-radius: 3px;
          //vertical-align: middle;
          padding: 10px;
          display: inline-block;
          margin-right: 10px;
          color: #1f2d3d;
          word-wrap:break-word;
        }

        .message-content-recv-avatar {
          display: inline-block;
          //vertical-align: bottom;
          float: left;
          margin-top: 7px;
          &::before {
            content: '';
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-right: 10px solid #21d778;
            margin-right: 10px;
            position: absolute;
            left: 41px;
            top: 28px;
          }
        }

        .message-content-recv-msg {
          position: relative;
          float: left;
          max-width: 82%;
          display: inline-block;
          .message-content-recv-msg-title {
            display: inline-block;
            width: 82%;
            margin-left: 10px;
          }
          .message-content-recv-msg-content{
            max-width: 100%;
            background-color: #21d778;
            border-radius: 3px;
            //vertical-align: middle;
            padding: 10px;
            display: inline-block;
            margin-left: 10px;
            color: #1f2d3d;
            word-wrap:break-word;
          }

        }
      }
    }
    .message-write {
      height: 130px;
      .message-write-title {
        height: 30px;
        line-height:38px;
        border-top: 1px solid #d4cbcb;

        .message-write-title-func {
          margin-left: 10px;
          cursor: pointer;
        }
      }

      .message-write-send {
        textarea {
          border: none;
          height: 75px;
          width: 100%;
          resize: none;
          padding: 10px;

          &:focus {
            outline: none;
          }
        }
      }
      .message-write-btn {
        height: 40px;
        text-align: right;
      }
    }
  }
}
</style>